<template>
  <div class="app-container">

    <div id="divSearch" ref="divSearch">
      <el-form :inline="true" :model="Search" class="demo-form-inline">

 
        <el-form-item label="名称"  size="small" prop="Search" style="height:20px">

          <el-input v-model.trim="Search.PrdName"  @keyup.enter.native="getDataList" placeholder="名称" />

        </el-form-item>
        <el-form-item label="编号"  size="small" @keyup.enter.native="getDataList" prop="Search" style="height:20px">

          <el-input v-model.trim="Search.PrdNo" @keyup.enter.native="getDataList"  placeholder="编号" />

        </el-form-item>

         <el-form-item label="规格"  size="small" @keyup.enter.native="getDataList"  prop="Search" style="height:20px">

          <el-input v-model.trim="Search.SPC" @keyup.enter.native="getDataList"  placeholder="规格" />

        </el-form-item>
 <el-form-item label="客户名称"  size="small" prop="Search" style="height:20px">

          <el-input v-model.trim="Search.ClientName"  @keyup.enter.native="getDataList" placeholder="客户名称" />

        </el-form-item>



        <el-form-item style="height:30px">

          <el-button type="primary" icon="el-icon-search" size="small" @click="getDataList">查询</el-button>
          <el-button type="primary" icon="el-icon-search" size="small" @click="FunRowAdd">添加</el-button>

        </el-form-item>
      </el-form>
    </div>
    <el-table :data="Datelist" :height="300" style="width: 800px;margin-top:1px;" border @selection-change="handleSelectionChange"   @select='select'  @select-all='select' >

      <el-table-column type="selection" label="选择" align="center" width="55">

      </el-table-column>

      <el-table-column align="center" label="编号" sortable width="120">
        <template slot-scope="scope">
          {{ scope.row.PrdNo }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="名称" width="150" sortable prop="path">
        <template slot-scope="scope">
          {{ scope.row.PrdName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="规格" width="400" sortable prop="path">
        <template slot-scope="scope">
          {{ scope.row.SPC }}
        </template>
         </el-table-column>
         <el-table-column align="center" label="颜色" width="400" sortable prop="path">
        <template slot-scope="scope">
          {{ scope.row.Remark2 }}
        </template>
         </el-table-column>
          <el-table-column align="center" label="库存" width="80" sortable prop="path">
        <template slot-scope="scope">
          {{ scope.row.Qty }}
        </template>
      </el-table-column>
         <el-table-column align="center" label="单位" width="50" sortable prop="path">
        <template slot-scope="scope">
          {{ scope.row.UT }}
        </template>
        
      </el-table-column>

       <el-table-column align="center" label="客户名称" width="120" sortable prop="path">
        <template slot-scope="scope">
          {{ scope.row.ClientName }}
        </template>
        
      </el-table-column>

      
        
     
     
    </el-table>
    <el-pagination background
                   layout="sizes, prev, pager, next,total"
                   :page-size="Search.pageSize"
                   :total="Search.total"
                   @current-change="pageChange" />






  </div>
</template>

<script>
  import path from 'path'
  import { deepClone } from '@/utils'
  import { getDataList } from '@/api/datalist'


  export default {

    data() {
      return {
        ProjectForm: "",
        inputName: "",
        routes: [],
        ParmType:"",
         index:0,
        Datelist: [],
        multipleTable: [],
        Search: {// 查询条件
          total: 0, // 总记录数
          pageSize: 10, // 一页显示的记录数
          page: 1, // /当前页码
          RNO: '003', // 表编号
          jsWhere:this.Where// 自定义条件
        },

        screenWidth: document.body.clientWidth
      }
    },
    computed: {
      routesData() {
        return this.routes
      }
    },
     props: {
      ParmType: String,
      Where: String,
        index:Int16Array,
        KeyName:String,
      required: true
    },
    created() {

      this.getDataList()
    },

    methods: {
      pageChange(page) { // 翻页
        this.Search.page = page

        this.getDataList()
      },
      async getDataList() { // 获取列表数据，通用






        const res = await getDataList({ data: JSON.stringify(this.Search) })

        this.Datelist = res.data.Table
        this.Search.total = res.data.Table1[0].RecordCount

      },
      sortChange: function (column) {

        this.Search.sort = column.prop + ' ' + column.order

        this.getDataList()
      },
      handleSelectionChange(val) {

        //this.multipleTable = val;



      },
  // 表格勾选
  select(rows,row){
    let isActive=true;
       

       let s=this.KeyName;
              if(this.KeyName!=null)//翻页记录添加行
              {
      
                //判断是否有删除
                if(rows.findIndex(item => item[this.KeyName] == row[this.KeyName])==-1){  
                  isActive = false
                  this.Keys=row[this.KeyName];
                }
      
               
                   rows.forEach(line => {
               
                  if(this.multipleTable!=null)
                  {
                   
                  
                  
                    if(this.multipleTable.findIndex(item => item[this.KeyName] == line[this.KeyName])==-1)//重复行不添加
                  {
                   
                    this.multipleTable.push(line);
                  }
                  }else
                  {
                   
                    this.multipleTable.push(line);
                  }
                
                
                  
                  
                })
      
              }else
              {
                this.multipleTable = rows;
              }
      
              if(isActive==false)
              {
                
                this.$forceUpdate();
               //查找索引
                let Indexs=this.multipleTable.findIndex(item => item[this.KeyName] == this.Keys);
               //删除
                this.multipleTable.splice(Indexs, 1);
              }
             
               
              //删除行
    }
      , FunRowAdd() {

        this.$emit('FunRowAdd',this.multipleTable,this.ParmType,this.index);

      }

    }



  }



</script>

<style lang="scss" scoped>
  .app-container {
    .EditObjs-table

  {
    margin-top: 0px;
  }

  .permission-tree {
    margin-bottom: 2px;
  }
  }
</style>
